<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>banner slider step06</title>
<!-- 
	step01 - 레이아웃 구성
	step02 - 이미지 전환
	step03 - 인덱스 컨트롤
	step04 - 애니메이션 적용
	step05 - 자동실행
	step06 - 플러그인으로 만들기
 -->
 <style type="text/css">
 	*{ padding: 0; margin: 0; }
 	.banner_slider_container *{
 		border: 1px solid black;
 		display: inline-block;
 		vertical-align: middle;
 	}
 	.banner_container{
 		width: 256px;
 		height: 256px;
 		position: relative;
 		overflow: hidden;
 	}
 	.banner_container img{
 		position: absolute;
 	}
 </style>
 <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
 <script type="text/javascript" src="js/jquery-plugin-bannerslider.js"></script>
 <script type="text/javascript">
 	$(document).ready( function(){
 		$( "#a" ).bannerSlider();
 		$( "#b" ).bannerSlider();
 	});
 </script>
</head>
<body>
	<div class="banner_slider_container" id="a">
		<img alt="" class="prev_arrow" src="img/prev_arrow.png">
		<div class="banner_container">
			<img alt="" src="img/img01.png">
			<img alt="" src="img/img02.png">
			<img alt="" src="img/img03.png">
			<img alt="" src="img/img04.png">
			<img alt="" src="img/img05.png">
		</div>		
		<img alt="" class="next_arrow" src="img/next_arrow.png">
	</div>
	
	<div class="banner_slider_container" id="b">
		<img alt="" class="prev_arrow" src="img/prev_arrow.png">
		<div class="banner_container">
			<img alt="" src="img/img01.png">
			<img alt="" src="img/img02.png">
			<img alt="" src="img/img03.png">
			<img alt="" src="img/img04.png">
			<img alt="" src="img/img05.png">
		</div>		
		<img alt="" class="next_arrow" src="img/next_arrow.png">
	</div>
</body>
</html>